<template>
    <div>
        <div class="outmain ba_f">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>更新记录</span>
                </div>
            </div>
            <el-scrollbar>
                <div class="recordBox">
                    <div class="record">
                        <div class="box" v-for="(item,index) in recordModel" :key="index">
                            <p class="version fon_14 font_w700 rel">{{item.notice_title}}</p>
                            <p class="time fon_12 color_9">发布于：{{item.dt_operdate}}</p>
                            <p class="recordCon" v-html="item.notice_content"><!-- <el-tag type="repair" class="repair">修复</el-tag> -->
                                </p>
                        </div>
                    </div>
                </div>
            </el-scrollbar>
            <el-pagination background layout="prev, pager, next" :total="page.total" :page-size="page.pagesize" :current-page.sync="page.currentPage" @current-change="handleCurrentChange"></el-pagination>
        </div>
    </div>
</template>
<script>
import { getUpContent } from '@/api/setup';
    export default {
      created() {
        this.bus.$emit('loading', true);
        this.init();
      },
        data() {
            return {
                recordModel: [
                //     {
                //     title: '云贝连锁版V2',
                //     createdAt: '2020-09-14',
                //     body: '云贝连锁版发布新版本',
                // }
                ],
              page: {
                total: 0,
                size: 10,
                currentPage: 1
              },
            }
        },
        methods: {
          async init() {
            const { data ,count} = await getUpContent({ page: this.page.currentPage,});
            this.recordModel = data ? data:[];
            this.page.total = count;
            this.bus.$emit('loading', false);
          },
          handleCurrentChange(val) {
            this.page.currentPage = val;
            this.init();
          },
        }
    }
</script>
<style>
    .recordBox {
        max-height: 1000px;
    }

    .record {
        border-left: 1px solid #E4E7ED;
        line-height: 24px;
        margin-left: 60px;
    }

    .box {
        padding-left: 54px;
    }

    .version {
        margin-top: 36px;
        line-height: 26px;
    }

    .version:before {
        content: "";
        position: absolute;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #FF8000;
        left: -59px;
        top: 9px;
    }

    .time {
        margin-bottom: 6px;
    }

    .el-tag {
        padding: 0 5px;
        height: 24px;
        line-height: 20px;
        margin-right: 5px;
    }

    .repair {
        color: #64cf8c;
        background: #ecf9f1;
    }

    .recordCon {
        white-space: pre-wrap;
    }
</style>
